<template>
  <div>
    <headerTopNav v-bind:activeIndex="activeIndex"></headerTopNav>
    <div>
      <el-row type="flex" justify="center">
        <el-col :span="13" style="margin-top: 20px;">
          <el-page-header @back="goBackToCenter" content="回到个人中心" style="height: 60px;line-height: 60px;
          padding-left: 30px;border:1px solid rgba(211,211,211,0.29)">
          </el-page-header>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-top: 20px;" >
        <el-col :span="13" style="padding:30px 100px 30px 40px;border:1px solid rgba(211,211,211,0.29)">
          <el-form ref="modifyUserForm" :model="modifyInfoForm" label-width="80px" :rules="rules">
            <input type="hidden" v-model="modifyInfoForm.id">
            <el-form-item label="头像">
              <el-input type="hidden" v-model="modifyInfoForm.avatar"></el-input>
              <el-upload
                  class="avatar-uploader"
                  :action="uploadAvatarUrl"
                  :headers="tokenObj"
                   name="userImg"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  style="padding-left: 30px">
                <img v-if="imageUrl" :src="imageUrl+modifyInfoForm.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

            </el-form-item>

            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="modifyInfoForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="modifyInfoForm.sex">
                <el-radio label="男" v-model="modifyInfoForm.sex"></el-radio>
                <el-radio label="女" v-model="modifyInfoForm.sex"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="个人简介" prop="description">
              <el-input type="textarea" :rows="6" v-model="modifyInfoForm.description"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
              <el-input v-model="modifyInfoForm.tel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="modifyInfoForm.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">提交</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script>
import headerTopNav from "@/components/HeaderTop";
export default {
  name: "ModifyPersonalInfo",
  components:{headerTopNav},
  data(){
    return{
      avatar:'',
      uploadAvatarUrl:this.$Myurl.serverUrl+'user/upload',
      activeIndex:'4',
      tokenObj:{
        token:''
      },
      imgUrl:this.$Myurl.userImageUrl,
      imageUrl:this.$Myurl.userImageUrl,
      modifyInfoForm:{
        id:'',
        nickName:'',
        avatar:'',
        sex:'男',
        description:'这是我的个人简介',
        tel:'',
        email:'',

      },
      rules: {
        nickname: [
          {required: true, message: '昵称不能为空！', trigger: 'blur'}
        ],
        tel: [
          {required: true, message: '手机号码不能为空！', trigger: 'blur'}
        ],
        email: [
          {required:true,message:'邮箱不能为空',trigger:'blur'},
          {pattern:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
            message:"请输入有效邮箱",trigger: 'blur' }

        ],
        description: [
          {required: true, message: '个人签名不能为空！', trigger: 'blur'}
        ]
      },
    }
  },
  methods:{
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);

      this.modifyInfoForm.avatar = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    goBackToCenter() {
      this.$router.push("/personalCenter")
    },
    submitForm(){
      this.$refs.modifyUserForm.validate(valid=>{
        if(!valid){
          return;
        }else{
          let url = "user/modify";
          // console.log(this.modifyInfoForm)
          this.$axios.put(url,this.modifyInfoForm)
              .then(res=>{
                if (res.data.code == 200){
                  this.$message({
                    type:'success',
                    message:res.data.msg,
                    duration:1000
                  });
                  sessionStorage.setItem("userInfo", JSON.stringify(this.modifyInfoForm));
                  this.initPersonalInfo();
                }else {
                  this.$message({
                    message:res.data.msg,
                    type:"error",
                    duration:1000
                  })
                }
              })
        }
      })

    },
    resetForm(){
      this.initPersonalInfo();
    },
    initPersonalInfo(){
      let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      this.modifyInfoForm = userInfo;
      console.log(this.modifyInfoForm)
    }
  },
  created() {
    this.initPersonalInfo();
  }

}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
}
</style>